<template>
	<div :class="['breadcrumb-box', !themeConfig.breadcrumbIcon && 'no-icon']">
		<span class="el-breadcrumb__inner">
			<span class="breadcrumb-title pl-1 pt-1 text-sm pr-4" style="float: left">
				<i class="iconfont iconbx-crosshair pr-1" style="font-size: 14px" />
				<span>{{ $t("breadcrumb.text") }}</span>
			</span>
		</span>
		<el-breadcrumb class="animate__animated animate__backInLeft iconfont" separator-class="iconbx-chevron-right">
			<template v-if="breadcrumbList">
				<!-- 首页面包屑不要可以直接删除 🙅‍♀️ -->
				<el-breadcrumb-item :key="home" :to="{ path: home }" v-if="false && breadcrumbList[0].meta.title !== '首页'">
					<span class="el-breadcrumb__inner is-link">
						<i class="iconfont iconhome pr-1" v-if="themeConfig.breadcrumbIcon" />
						<span class="breadcrumb-title pl-1">首页</span>
					</span>
				</el-breadcrumb-item>
				<!-- other -->
				<el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
					<span
						class="el-breadcrumb__inner is-link"
						:class="index == breadcrumbList.length - 1 ? 'animate__animated animate__fadeIn' : ''"
						@click="onBreadcrumbClick(item)"
					>
						<i v-if="themeConfig.breadcrumbIcon" :class="`iconfont ${item.meta.icon || 'iconbookmark'} pr-1`" />
						<span class="breadcrumb-title">{{ isEnglish ? item.meta.entitle : item.meta.title }}</span>
					</span>
				</el-breadcrumb-item>
				<!-- <template v-else>{{ JSON.stringify(route) }}} </template> -->
			</template>
		</el-breadcrumb>
	</div>
</template>

<script setup lang="ts">
import { GlobalStore } from "@/stores";
import { AuthStore } from "@/stores/modules/auth";
import { computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getHome } from "../../../../utils/routerUtil";
import mittBus from "@/utils/mittBus";

const route = useRoute();
const router = useRouter();
const authStore = AuthStore();
const globalStore = GlobalStore();
const themeConfig = computed(() => globalStore.themeConfig);
const breadcrumbList = computed(() => authStore.breadcrumbListGet[route.matched[route.matched.length - 1].path]);
const home = getHome();
const isEnglish = ref(globalStore.language == "en");
const onBreadcrumbClick = (item: any) => {
	if (!item.component || item.component == "Layout") {
		router.push(item.children?.[0]?.path);
	} else {
		router.push(item.path);
	}
};
onBeforeMount(() => {
	//监听语言改变
	mittBus.on("changeLang", lang => {
		if (lang == "zh") {
			isEnglish.value = false;
		} else if (lang == "en") {
			isEnglish.value = true;
		}
	});
});
onBeforeUnmount(() => {
	mittBus.off("changeLang");
});
</script>

<style scoped lang="scss">
.breadcrumb-box {
	display: flex;
	align-items: center;
	height: 39px;
	padding-right: 50px;
	padding-left: 15px;
	overflow: hidden;
	border-bottom: 1px solid #dddddd;
	mask-image: linear-gradient(90deg, #000000 0%, #000000 calc(100% - 50px), transparent);
	.breadcrumb-title {
		font-size: 12px;
	}
	.el-breadcrumb {
		white-space: nowrap;
		.el-breadcrumb__item {
			position: relative;
			display: inline-block;
			.el-breadcrumb__inner {
				display: inline-flex;
				font-weight: normal;
				color: #777777;
				.breadcrumb-icon {
					font-size: 16px;
				}
			}
			.breadcrumb-title {
				padding-top: 4px;
			}
			:deep(.el-breadcrumb__separator) {
				position: relative;
				top: 2px;
			}
		}
		.el-breadcrumb__item:last-child,
		.el-breadcrumb__item[aria-current="page"] {
			.el-breadcrumb__inner {
				color: #777777;
			}
		}
	}
}
</style>
